<template>
	<view class="container" style="background-color: #f3f5f9;">
		<view class="title" style="margin-left: 130px;">预约系统</view>
		<view class="abc">
			<view class="form-group">
				<label>预约日期：</label>
				<picker mode="date" :value="date" @change="onDateChange">
					<view class="picker">{{ date }}</view>
				</picker>
			</view>
			<view class="form-group">
				<label>预约时间：</label>
				<picker mode="time" :value="time" @change="onTimeChange">
					<view class="picker">{{ time }}</view>
				</picker>
			</view>
		</view>
		<view class="big">
			<view class="form-group">
				<label>姓名：</label>
				<input class="small" type="text" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="form-group">
				<label>证件类型：</label>
				<picker mode="selector" :range="idTypes" @change="onIdTypeChange">
					<view class="picker">{{ idTypes[idTypeIndex] }}</view>
				</picker>
			</view>
			<view class="form-group">
				<label>证件号码：</label>
				<input class="small" type="text" v-model="idNumber" placeholder="请输入证件号码" />
			</view>
			<view class="form-group">
				<label>手机号码：</label>
				<input class="small" type="number" v-model="phone" placeholder="请输入手机号码" />
			</view>
			<view class="form-group">
				<label>同行人数：</label>
				<input class="small" type="number" v-model="companions" placeholder="请输入同行人数" />
			</view>
		</view>
		<button @click="submitReserve" type="primary">提交预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '2024-9-20',
				time: '12:00:00',
				name: '',
				idTypes: ['身份证', '护照', '其他'],
				idTypeIndex: 0,
				idNumber: '',
				phone: '',
				companions: '',
				userInfoType: 'person'
			};
		},
		methods: {
			onDateChange(e) {
				this.date = e.detail.value;
			},
			onTimeChange(e) {
				this.time = e.detail.value;
			},
			onIdTypeChange(e) {
				this.idTypeIndex = e.detail.value;
			},
			submitReserve() {
				// 非空判断
				if (!this.date || !this.time || !this.name || !this.idNumber || !this.phone || !this.companions) {
					uni.showToast({
						title: '请填写所有必填项',
						icon: 'none'
					});
					return;
				}

				const userData = {
					date: this.date,
					time: this.time,
					name: this.name,
					idType: this.idTypes[this.idTypeIndex],
					idNumber: this.idNumber,
					phone: this.phone,
					companions: this.companions,
					userInfoType: this.userInfoType
				};

				uni.setStorage({
					key: 'userData',
					data: JSON.stringify(userData),
					success: function() {
						console.log('数据存储成功');
						uni.navigateTo({
							url: '/pages/successfulApointment/successfulApointment'
						});
					}
				});
			},
		},
	}
</script>

<style>
	.container {
		padding: 20px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.form-group {
		margin-bottom: 15px;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
	}

	.picker {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.abc {
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		border-width: 10px;
		border-top-width: 5px;
		border-bottom-color: #f3f5f9;
		border-bottom-style: none;
	}

	.big {
		border: 1px;
		border-color: white;
		border-style: solid;
		background-color: white;
		border-radius: 10px;
		border-left-width: 15px;
		border-right-width: 15px;
		border-bottom-width: 5px;
		width: 320px;
	}

	.small {
		border: 2px;
		border-color: #f3f5f9;
		border-style: solid;
		background-color: #f3f5f9;
		border-radius: 7px;
		width: 100%;
	}
</style>